<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { SubmissionApi } from '@/api/SubmissionApi.ts';
import { JudgeStatus, type SubmissionVO } from '@/api/Submission.ts';
import { useUserInfoStore } from '@/stores/UserInfo.ts';
import CodeDialog from './codeDialog.vue';

const props = defineProps<{
  problemId: string;
}>();

const userInfoStore = useUserInfoStore();
const loading = ref(false);
const submissions = ref<SubmissionVO[]>([]);
const codeDialogVisible = ref(false);
const selectedSubmission = ref<SubmissionVO | null>(null);

// 表格列定义
const columns = [
  {
    title: '提交状态',
    key: 'status',
    align: 'center',
    width: '20%'
  },
  {
    title: '语言',
    key: 'language',
    align: 'center',
    width: '15%'
  },
  {
    title: '运行时间',
    key: 'time',
    align: 'center',
    width: '15%'
  },
  {
    title: '使用内存',
    key: 'memory',
    align: 'center',
    width: '15%'
  },
  {
    title: '提交时间',
    key: 'createTime',
    align: 'center',
    width: '35%'
  },
];

// 判题状态中文映射
const statusTextMap: Record<string, string> = {
  [JudgeStatus.ACCEPTED]: '正确',
  [JudgeStatus.WRONG_ANSWER]: '答案错误',
  [JudgeStatus.COMPILE_ERROR]: '编译错误',
  [JudgeStatus.MEMORY_LIMIT_EXCEEDED]: '内存溢出',
  [JudgeStatus.TIME_LIMIT_EXCEEDED]: '超时',
  [JudgeStatus.PRESENTATION_ERROR]: '展示错误',
  [JudgeStatus.WAITING]: '等待中',
  [JudgeStatus.OUTPUT_LIMIT_EXCEEDED]: '输出溢出',
  [JudgeStatus.DANGEROUS_OPERATION]: '危险操作',
  [JudgeStatus.RUNTIME_ERROR]: '运行错误',
  [JudgeStatus.SYSTEM_ERROR]: '系统错误',
};

// 判题状态颜色映射
const statusColorMap: Record<string, string> = {
  [JudgeStatus.ACCEPTED]: 'green',
  [JudgeStatus.WRONG_ANSWER]: 'red',
  [JudgeStatus.COMPILE_ERROR]: 'orange',
  [JudgeStatus.MEMORY_LIMIT_EXCEEDED]: 'red',
  [JudgeStatus.TIME_LIMIT_EXCEEDED]: 'red',
  [JudgeStatus.PRESENTATION_ERROR]: 'orange',
  [JudgeStatus.WAITING]: 'blue',
  [JudgeStatus.OUTPUT_LIMIT_EXCEEDED]: 'red',
  [JudgeStatus.DANGEROUS_OPERATION]: 'red',
  [JudgeStatus.RUNTIME_ERROR]: 'orange',
  [JudgeStatus.SYSTEM_ERROR]: 'red',
};

const getStatusText = (status: string) => {
  return statusTextMap[status] || status;
};

const getStatusColor = (status: string) => {
  return statusColorMap[status] || 'default';
};

const formatTime = (timeStr: string) => {
  return new Date(timeStr).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

const formatMemory = (memoryKB: number) => {
  const memoryMB = memoryKB / 1024;
  return memoryMB.toFixed(2);
};

const loadSubmissions = async () => {
  loading.value = true;
  try {
    const data = await SubmissionApi.search({
      language: null,
      userId: userInfoStore.currentUser?.id || null,
      title: props.problemId  // 使用题目ID作为标题搜索
    });
    submissions.value = data?.records ?? [];
  } catch (error) {
    console.error('加载提交记录失败:', error);
  } finally {
    loading.value = false;
  }
};

const handleViewCode = (record: SubmissionVO) => {
  selectedSubmission.value = record;
  codeDialogVisible.value = true;
};

onMounted(() => {
  loadSubmissions();
});
</script>

<template>
  <div class="w-full h-full flex flex-col p-6">
    <h2 class="text-xl font-bold text-gray-800 mb-4">我的提交记录</h2>
    
    <a-table
      :columns="columns"
      :data-source="submissions"
      :loading="loading"
      :pagination="false"
      rowKey="createTime"
      size="small"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'status'">
          <a-tag 
            :color="getStatusColor(record.judgeInfo.message)"
            class="cursor-pointer hover:opacity-80"
            @click="handleViewCode(record)"
          >
            {{ getStatusText(record.judgeInfo.message) }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'language'">
          <a-tag color="blue">{{ record.language }}</a-tag>
        </template>
        <template v-else-if="column.key === 'time'">
          <span>{{ record.judgeInfo.time }}ms</span>
        </template>
        <template v-else-if="column.key === 'memory'">
          <span>{{ formatMemory(record.judgeInfo.memory) }}MB</span>
        </template>
        <template v-else-if="column.key === 'createTime'">
          <span>{{ formatTime(record.createTime) }}</span>
        </template>
      </template>
    </a-table>

    <!-- 代码弹窗 -->
    <CodeDialog 
      v-model:visible="codeDialogVisible"
      :submission="selectedSubmission"
    />
  </div>
</template>

<style scoped>
</style>
